<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./duodiantou.css">
</head>
<body>
    <!-- 大盒子id名曰box -->
    <div class="box count1" id="box">

        <div class="col col1">
            <div class="dot dot1"></div>
            <div class="dot dot2"></div>
            <div class="dot dot3"></div>
        </div>

        <div class="col col2">
            <div class="dot dot4"></div>
            <div class="dot dot5"></div>
            <div class="dot dot6"></div>
        </div>

        <div class="col col1">
            <div class="dot dot7"></div>
            <div class="dot dot8"></div>
            <div class="dot dot9"></div>
        </div>
    </div>

    <div style="display: flex;justify-content: center;margin-top: 10px;">
        <!-- 输入框的id名曰ip -->
        <input id="ip" type="text" placeholder="输入点数">

        <button id="btn">给丫点数</button>
    </div>


    <!-- 交互脚本 -->
    <script>
        // 在btn身上一怼鼠标 以函数功能function响应之
        btn.onclick = function(){

            // 大盒子的类名 = box count用户输入的数字
            box.className = "box count" + ip.value //ip.value即用户在input框中的输入
        }
    </script>

</body>
</html>